<template>
  <div class="share-popup-wrapper" v-show="showSharePopup">
    <div :class="['share-popup',showSharePopup?'fadein':'fadeout']">
      <div class="content">
        <h3>体验更多完整功能</h3>
        <h5>前往各大应用市场下载升学在线APP</h5>
        <img class="appImg" src="~@/static/images/no1.png" alt />
        <h5>关注公众号“升学在线”</h5>
        <span>长按识别二维码，立即关注公众号</span>
        <img class="qcodeImg" src="~@/static/images/no2.png" alt />
      </div>
      <div class="foot-btn flex-h">
        <span class="flex1 left" @click="$emit('cancel')">取消</span>
        <span class="flex1 right" @click="goDownload">前往下载</span>
      </div>
    </div>
  </div>
</template>

<script>
import ls from "store2";
export default {
  components: {},
  props: {
    showSharePopup:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    goDownload(){
        window.location = "https://a.app.qq.com/o/simple.jsp?pkgname=com.sx985.am";
    }
  }
};
</script>

<style lang="less" scoped>
.share-popup-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
  .share-popup {
    width: 6.4rem;
    height: 8rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.2rem;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -3.2rem;
    margin-top: -4rem;
    overflow: hidden;
    .content {
      width: 100%;
      height: 7rem;
      overflow: hidden;
      h3,
      h5,
      img,
      span {
        display: block;
        font-family: "PingFangSC-Semibold", PingFangSC;
        text-align: center;
      }
      h3 {
        font-size: 0.36rem;
        font-weight: 600;
        color: rgba(34, 34, 34, 1);
        margin-top: 0.4rem;
      }
      h5 {
        font-size: 0.26rem;

        font-weight: 500;
        color: rgba(34, 34, 34, 1);
        margin-top: 0.4rem;
      }
      span {
        font-size: 0.24rem;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
      }
      img {
        width: 5.8rem;
        height: auto;
        margin: 0 auto;
      }
    }
    .foot-btn {
      span {
        line-height: 1rem;
        font-size: 0.3rem;
        font-weight: 600;
        text-align: center;
        border-top:0.01rem solid rgba(229,232,237,1);
      }
      .left {
         border-right:0.01rem solid rgba(229,232,237,1);
        color: rgba(34, 34, 34, 1);
      }
      .right {
        color:@assistColor;
      }
    }
  }

      .fadein {
      animation: animate_in 0.3s;
    }
    .fadeout {
      animation: animate_out 0.3s;
      opacity: 0;
    }
    @keyframes animate_in {
      0% {
        opacity: 0;
      }
      100%{
        opacity: 1;
      }
    }
    @keyframes animate_out {
      0% {
        opacity: 1;
      }
      100%{
        opacity: 0;
      }
    }
}
</style>
